<template>
    <li v-if="meta.photos.length" class="m-detail-item">
        <dl class="section">
            <dd>
                <img :src="meta.photos[0].url" :alt="meta.photos[0].title">
            </dd>
            <dd>
                <h4>{{meta.name}}</h4>
                <p>
                    <span v-if="meta.biz_ext&&meta.biz_ext.ticket_ordering">剩余：{{ Number(meta.biz_ext.ticket_ordering) }}</span>
                    <span v-if="meta.deadline">截止日期：{{ meta.deadline }}</span>
                </p>
                <p>
                    <span class="price">{{ Number(meta.biz_ext.cost) }}</span>
                    <sub>门店价{{ Number(meta.biz_ext.cost) }}</sub>
                </p>
            </dd>
            <dd>
                <el-button type="warning" round @click="createCart">立即抢购</el-button>
            </dd>
        </dl>  
    </li>
</template>

<script>
export default {
    props: {
        meta: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        async createCart() {
            let _this = this
            let {status, data: {code,id}} = await this.$axios.post('/cart/create', {
                params: {
                    id: Math.random().toString().slice(3,9),
                    detail: {
                        name: _this.meta.name,
                        price: _this.meta.biz_ext.cost,
                        imgs: _this.meta.photos
                    }
                }
            })
            if (status === 200 && code === 0) {
                window.location.href = `/cart/?id=${id}`
            }
            else {
                alert('购物车创建出错了')
            }
        }
    }
}
</script>

<style lang="scss">
    // .m-detail-item {
        .section {
            display: flex;
            padding: 20px 0;
            align-items: center;
            border-bottom: 1px solid #ddd;
            dd {
                &:nth-child(1) {
                    img {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                    }
                }
                &:nth-child(1) {
                    flex: 1
                }
                h4 {
                    vertical-align: middle;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    max-width: 480px;
                    font-size: 16px;
                    color: #222;
                    font-weight: 500;
                    height: 22px;
                    line-height: 22px;
                    margin-bottom: 4px;
                    cursor: pointer;
                }
                p {
                    font-size: 12px;
                    color: #666;
                    height: 17px;
                    line-height: 17px;
                    margin-bottom: 22px;
                    .price {
                        font-size: 30px;
                        color: #F60;
                        margin-right: 10px;
                        &:before {
                            content: '￥';
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    // }
</style>


